<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50">
    <div v-if="!showChat" class="text-center">
      <el-button
        type="primary"
        size="large"
        @click="showChat = true"
        class="text-xl px-8 py-4"
      >
        开始 AI 对话
      </el-button>
      <!-- <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=13215456456" alt="QR Code"> -->
      
    </div>

    <div v-else class="fixed inset-4 bg-white rounded-lg shadow-xl overflow-hidden">
      <div class="h-full flex flex-col bg-gray-100">
        <!-- 头部 -->
        <div class="p-4 border-b flex justify-between items-center bg-white shadow-sm">
          <div class="flex items-center gap-3">
            <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white">
              AI
            </div>
            <h2 class="text-lg font-medium">小工同学</h2>
          </div>
          <el-button
            type="default"
            circle
            @click="showChat = false"
          >
            <el-icon><Close /></el-icon>
          </el-button>
        </div>

        <div class="flex-1 overflow-hidden">
          <ChatWindow />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import ChatWindow from './components/ChatWindow.vue'

const showChat = ref(false)

</script>

<style scoped>
.fixed {
  left: 50%;
  top: 50%;
  /* transform: translate(-50%, -50%); */
  width: 90%;
  height: 90%;
  max-width: 1200px;
  max-height: 800px;
}
</style>
